<template>
  <div>
    <h2>自定义指令</h2>
    <p v-color="c">hello world</p>
    <input type="text" v-focus>
    <hr>
    <my-test :uname="uname"></my-test>
  </div>
</template>

<script>
import MyTest from './components/MyTest.vue'
export default {
  components: { MyTest },
  data() {
    return {
      c:'red',
      uname:'zs'
    }
  },
  directives: {
    // 指令: {
    //   //el 表示使用这个指令的元素  obj.value 表示指令的值
    //   bind(el,obj) {},  //只会执行一次，可以对元素做一些样式的初始化操作
    //   inserted(el,obj) {}, // 只会执行一次，可以在里面对元素进行行为操作，比如让元素获得焦点
    //   update(el,obj) {}, // 数据更新后,子组件的页面不一定更新，会执行
    //   componentUpdated(el,obj) {}, // 数据更新后，包括子组件的数据·页面也更新后，会执行
    //   unbind(el,obj) {} // 指令解绑的时候（组件销毁），执行
    // },
   
    // 指令(el,obj) {},  //这个函数写法，相当于bind和update方法
    color: {
      bind(el,obj) {
        el.style.color = obj.value
      },
      update(el,obj) {
        el.style.color = obj.value
      }
    },
    focus: {
      inserted(el) {
        el.focus()
      }
    }
  }
}
</script>

<style>

</style>